<template>
  <div class="page-mobile-combo-detail">
    <white-header
      :isShowTopNav="true"
      :isShowBack="true"
      :isShowRight="true"
      :title="course_combo.comboName"
    ></white-header>
    <div class="combo-detail">
        <div class="combo-img" v-if="web_info.THEME_TYPE != 2">
            <img v-if="course_combo.cover" :src="course_combo.cover" alt="">
            <img v-else src="/img/mobile/course-combo-bg.png" alt="">
        </div>
        <div v-if="false" :class="['combo-container', kl_md.KLGL == 1 ? 'gelin-card' : '']" :style="{height: isOpen ? 'inherit': kl_md.KLGL == 1 ? '7.6654rem':'5.24rem'}">
          <div class="combo-head" @click="toggleBtn">
            包含{{(course_combo && course_combo.courseList) ? course_combo.courseList.length:0}}门课程
            <van-icon style="margin-left:.15rem;" :name="isOpen ? 'arrow-down':'arrow'" />
          </div>
          <div class="price-box-fixed">
            <span class="new-price-combo"><span>￥</span><span style="font-size:.384rem;">{{ course_combo.currentPrice }}</span></span>
            <span class="old-price-combo">共省{{ Number(course_combo.price) - Number(course_combo.currentPrice) }}块</span>
          </div>
          <div class="combo-course-item" v-for="(item,index) in course_combo.courseList" :key="index" @click="toPath(item.id)">
            <div class="course-left">
              <div class="course-name-box">{{item.courseName}}</div>
              <div class="course-content">
                <div class="content-left">
                  <span>￥</span><span style="font-size:.3264rem">{{ item.price }}</span>
                </div>
                <div class="content-right">
                  {{ item.acName }}
                </div>
              </div>
            </div>
            <div class="course-right">
              <img :src="item.iconPath" alt="">
            </div>
          </div>
        </div>
        <div class="combo-info-content">
          <div class="combo-name">{{course_combo.comboName}}</div>
          <div class="combo-introduce">{{course_combo.introduce}}</div>
          <div class="combo-student-price">
            <div class="student">已有{{course_combo.studentSum}}人购买</div>
            <div class="price" v-show="!is_had_combo">
              <div class="old-price" v-if="web_info.THEME_TYPE == 1">原价：¥{{course_combo.price}}</div>
              <div class="new-price-t" v-if="web_info.THEME_TYPE == 2">套餐价：</div>
              <div class="new-price">￥<span>{{course_combo.currentPrice}}</span></div>
            </div>
            <div class="has-combo" v-show="is_had_combo">
              已拥有
            </div>
          </div>
        </div>
    </div>
    <div class="course-list" v-if="web_info.THEME_TYPE != 2" :style="{marginBottom:is_had_combo?'0':'.6rem'}">
      <div class="title">包含{{(course_combo && course_combo.courseList) ? course_combo.courseList.length:0}}门课程</div>
      <div class="course-box" v-for="(item,index) in course_combo.courseList" :key="index" @click="toPath(item.id)" :class="[(course_combo && index != (course_combo.courseList.length - 1))?'bottom':'']">
        <div class="box-left">
          <img :src="item.iconPath" alt="">
        </div>
        <div class="box-right">
          <div class="course-name">{{item.courseName}}</div>
          <div class="course-info">{{item.goal}}</div>
          <div class="course-price">原价：￥{{item.price}}</div>
        </div>
      </div>
    </div>
    
    <div class="combo-detail" v-if="web_info.THEME_TYPE == 2 && kl_md.KLZTQH == 1">
      
      <div :class="['combo-container', kl_md.KLGL == 1 ? 'gelin-card' : '']" :style="{height: isOpen ? 'inherit': kl_md.KLGL == 1 ? '8.3998rem':'5.9744rem'}">
        <div class="combo-title">课程套餐</div>
        <div class="combo-head" @click="toggleBtn">
          包含{{(course_combo && course_combo.courseList) ? course_combo.courseList.length:0}}门课程
          <van-icon style="margin-left:.15rem;" :name="isOpen ? 'arrow-down':'arrow'" />
        </div>
        <div class="price-box-fixed">
          <span class="new-price-combo"><span>￥</span><span style="font-size:.384rem;">{{ course_combo.currentPrice }}</span></span>
          <span class="old-price-combo">共省{{ Number(course_combo.price) - Number(course_combo.currentPrice) }}块</span>
        </div>
        <div class="combo-course-item" v-for="(item,index) in course_combo.courseList" :key="index" @click="toPath(item.id)">
          <div class="course-left">
            <div class="course-name-box">{{item.courseName}}</div>
            <div class="course-content">
              <div class="content-left">
                <span>￥</span><span style="font-size:.3264rem">{{ item.price }}</span>
              </div>
              <div class="content-right">
                {{ item.acName }}
              </div>
            </div>
          </div>
          <div class="course-right">
            <img :src="item.iconPath" alt="">
          </div>
        </div>
      </div>
    </div>
    <div class="combo-detail-info" v-if="web_info.THEME_TYPE == 2 && course_combo.comboDetail">
      <div class="detail-title">套餐详情</div>
      <div class="detail-content ql-snow">
        <div class="ql-editor" v-html="course_combo.comboDetail"></div>
      </div>
    </div>
    <div class="footer" v-show="!is_had_combo">
      <div class="submit-btn" @click="buyCourseComboHandle">立即购买</div>
    </div>
  </div>
</template>

<script>
import ComboCard from "~/components/mobile/ComboCard.vue";
import WhiteHeader from "~/components/mobile/WhiteHeader.vue";
import { mapState, mapActions, mapMutations } from "vuex";
import { getMemberInfo, getMember } from "~/api/member";
import { getCourseCombo,buyCourseCombo } from "~/api/course-combo";
export default {
  props: ["setDisabled", "refreshFun", "setLoading"],
  components: {
    ComboCard,
    WhiteHeader
  },
  data() {
    return {
      course_combo: {},
      scroll_heigth: 0,
      title: "套餐详情",
      isOpen:false,
    };
  },
  computed: {
    ...mapState({
      token(state) {
        return state.token;
      },
      user_info(state) {
        return state.user_info;
      },
      web_info(state) {
        return state.web_info;
      },
      is_loading(state) {
        return state.is_loading;
      },
      is_member(state) {
        return JSON.stringify(state.member_info) != "{}";
      },
      kl_md(state) {
        return state.kl_md;
      },
      user_member(state) {
        return state.member_info;
      },
      buy_combo_list(state) {
        return state.buy_combo_list;
      }
    }),
    comboId() {
      return this.$route.query.id;
    },
    is_had_combo() {
      let res = this.buy_combo_list.filter(i => i.courseComboId == this.comboId);
      console.log("拥有该门套餐", res);
      if (res.length > 0) {
        return true;
      } else {
        return false;
      }
    },
  },
  watch: {},
  methods: {
    ...mapMutations(["SET_IS_LOADING","UPDATE_USERINFO",
      "UPDATE_BUYRECORD_LIST","UPDATE_BUYCOMBO_LIST"]),
    ...mapActions(["initMember","initBuyCombo"]),
    toggleBtn(){
      this.isOpen = !this.isOpen;
    },
    toPath(id) {
      this.$router.push({
        path: "/m/course-detail",
        query: {
          id
        }
      });
    },
    turnString(num) {
      var re = /^[0-9]+$/;
      var re2 = /^[0-9]+(\.[0-9]{1})$/;
      if (re.test(num)) {
        num += ".00";
      }
      if (re2.test(num)) {
        num += "0";
      }
      return num;
    },
    buyCourseComboHandle(){
      if(this.token && Object.keys(this.user_info).length > 0){
        this.$dialog
        .confirm({
          title: this.$t("locale.mobile.order.t6"),
          message:
            this.$t("locale.mobile.order.t7") +
            this.course_combo.currentPrice +
            this.$t("locale.mobile.order.t8")
        })
        .then(async () => {
          console.log(this.course_combo.currentPrice, this.user_info.balance);
          if (this.course_combo.currentPrice > this.user_info.balance) {
            this.$dialog
              .confirm({
                title: this.$t("locale.mobile.order.t9"),
                message:
                  this.$t("locale.mobile.order.t10") +
                  (this.course_combo.currentPrice - this.user_info.balance) +
                  this.$t("locale.mobile.order.t11"),
                confirmButtonText: this.$t("locale.mobile.order.t12")
              })
              .then(() => {
                this.$router.push({
                  path: "/m/wallet",
                  query: {
                    num: this.course_combo.currentPrice - this.user_info.balance,
                    rdurl: this.$route.fullPath
                  }
                });
              });
          } else {
            this.SET_IS_LOADING(true);
            let params = {
              comboId: this.course_combo.id,
              userId: this.user_info.id,
              price: this.turnString(this.course_combo.currentPrice),
              // ip: returnCitySN.cip
            };
            console.log(params);
            let result = await buyCourseCombo(params);
            if (result && result.data && result.data.code == 200) {
              console.log("购买成功",result.data.data);
              const {
                balance,
                id,
                courseComboId,
                userId,
                courseBuyRecordList
              } = result.data.data;
              let update_obj = {
                balance
              };
              this.UPDATE_USERINFO(update_obj);
              for(let i = 0;i < courseBuyRecordList.length;i++){
                  let course_update_obj = {
                    id:courseBuyRecordList[i].id,
                    courseId:courseBuyRecordList[i].courseId,
                    userId:courseBuyRecordList[i].userId,
                    deleted:courseBuyRecordList[i].deleted
                  };
                  console.log("套餐购买的课程",course_update_obj);
                  this.UPDATE_BUYRECORD_LIST(course_update_obj);
              }
              let combo_update_obj = {
                id,
                courseComboId,
                userId
              }
              this.UPDATE_BUYCOMBO_LIST(combo_update_obj);
              this.SET_IS_LOADING(false);
              this.$toast(this.$t("locale.mobile.order.t13"));
            } else {
              this.SET_IS_LOADING(false);
              if (result && result.data && result.data.code == 420) {
                this.$toast(this.$t("locale.mobile.order.t14"));
              } else {
                this.$toast(this.$t("locale.mobile.order.t15"));
              }
            }
          }
        })
        .catch(() => {});
      }else{
        this.$dialog.confirm({
          title: '提示',
          message: '您尚未登录，请先登录再购买哟！',
        })
        .then(() => {
          this.$router.replace("/m/login");
        })
        .catch(() => {
          return false;
        });
      }
    },
    async getMemberInfo() {
      this.SET_IS_LOADING(true);
      if (this.token && Object.keys(this.user_info).length > 0) {
        let memberDiscount = await getMemberInfo(this.user_info.id);
        if (
          memberDiscount &&
          memberDiscount.data &&
          memberDiscount.data.code == 200
        ) {
          this.memberDiscount = memberDiscount.data.data;
        } else {
          
        }
      }

      this.SET_IS_LOADING(false);
    },
    async getData() {
        this.SET_IS_LOADING(true);
        let result = await getCourseCombo(this.comboId);
        if(result && result.data && result.data.code){
            this.course_combo = result.data.data;
        }else{
            
        }
        this.SET_IS_LOADING(false);
    }
  },
  activated() {
    this.setDisabled(false);
    this.getData()
    this.initBuyCombo()
    this.refreshFun(() => {
      this.getData()
      this.initBuyCombo()
        .then(res => {
            this.setLoading(false);
        })
        .catch(() => {
          this.setLoading(false);
          this.SET_IS_LOADING(false);
        });
    });
  },
  deactivated() {
    this.setDisabled(true);
  },
  beforeDestroy() {
    this.setDisabled(true);
  },
  created() {
    //开启下拉刷新
    this.setDisabled(false);
    this.getData()
    this.initBuyCombo()
    //下拉回调
    this.refreshFun(() => {
      this.getData()
      this.initBuyCombo()
        .then(res => {
            this.setLoading(false);
        })
        .catch(() => {
          this.setLoading(false);
          this.SET_IS_LOADING(false);
        });
    });
  },
  mounted() {}
};
</script>

<style lang="scss" scoped>
.page-mobile-combo-detail {
  min-height: 100vh;
  // background-color: #f7f7fa;
  background: #F2F2F5;
  .combo-info-content{
    background-color: #ffffff;
    padding-top: .1rem;
  }
  .combo-detail {
    border-top: 1px solid #ededf1;
    // background-color: #ffffff;
    background: #F2F2F5;
    
    .combo-img{
        width: 6.624rem;
        height: 4.416rem;
        margin: .288rem auto;
        background-color: var(--theme-color);
        border-radius: .096rem;
        img{
            display: block;
            width: 100%;
            height: 100%;
            border-radius: .096rem;
        }
    }
    .combo-container{
      // width: 6.624rem;
      width: 7.2rem;
      height: 5.24rem;
      margin: .288rem auto;
      // margin: 0 auto .288rem;
      overflow: hidden;
      padding: 0 .384rem;
      background-color: #fff;
      // border-radius: .096rem;
      position: relative;
      &.gelin-card{
        .combo-course-item{
          height: 3.5167rem;
          // padding: .384rem  0 .48rem 0;
          .course-left{
            height: 2.4319rem;
            .course-name-box{
              margin-bottom: 1.2rem;
            }
          }
          .course-right{
            height: 2.4319rem;
          }
        }
      }
      .combo-title{
        // width: 6.624rem;
        padding: .25rem 0 .1rem 0;
        font-size: .3264rem;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #333333;
      }
      .combo-head{
        font-size: .288rem;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #333333;
        display: flex;
        align-items: center;
        height: .7rem;
        img{
          width: .2304rem;
          height: .2304rem;
          display: block;
          margin-left: .1rem;
        }
      }
      .price-box-fixed{
        position: absolute;
        right: 0;
        top: 0;
        width: 3.2064rem;
        height: .672rem;
        background: linear-gradient(149deg, #F0D2BE 0%, #D2A279 100%);
        box-shadow: .0192rem 0 .1152rem 0 #F8DBC6;
        // border-radius: 0 .192rem 0 .96rem;
        border-radius: 0 0 0 .96rem;
        text-align: center;
        line-height: .672rem;
        .new-price-combo{
          font-size: .2688rem;
          font-family: DIN-Medium, DIN;
          font-weight: 500;
          color: #FFFFFF;
        }
        .old-price-combo{
          font-size: .2304rem;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #FFFFFF;
          margin-left: .3rem;
        }
      }
      .combo-course-item{
        width: 100%;
        height: 2.304rem;
        border-bottom: 1px solid #EDEDF1;
        display: flex;
        justify-content: space-between;
        align-items: center;
        &:last-child{
          border-bottom: none;
        }
        .course-left{
          width: 3.8rem;
          height: 1.2192rem;
          .course-name-box{
            font-size: 0.2688rem;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #666666;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
            line-height: 0.384rem;
            height: 0.768rem;
          }
          .course-content{
            display: flex;
            justify-content: space-between;
            .content-left{
              font-size: .2304rem;
              font-family: DIN-Medium, DIN;
              font-weight: 500;
              color: var(--theme-color);
            }
            .content-right{
              font-size: .2304rem;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #999999;
            }
          }
        }
        .course-right{
          width: 1.8288rem;
          height: 1.2192rem;
          img{
            width: 100%;
            height: 100%;
            display: block;
            border-radius: .096rem;
          }
        }
      }
    }
    .combo-name{
      color: #494a4d;
      font-size: .34559rem;
      font-weight: bold;
      line-height: 1;
      width: 6.624rem;
      margin: 0 auto;

      font-size: .384rem;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #333333;
    }
    .combo-introduce{
      color: #949699;
      font-size: .2688rem;
      line-height: .36rem;
      width: 6.624rem;
      margin: .2rem auto .288rem;
    }
    .combo-student-price{
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      width: 6.624rem;
      // margin: .2rem auto .288rem;
      margin: 0 auto;
      padding-bottom:.288rem;
      .student{
        font-size: .2688rem;
        color: #adafb3;
      }
      .price{
        display: flex;
        align-items: baseline;
        .old-price{
          margin-right: .3rem;
          vertical-align: bottom;
          color: #adafb3;
          text-decoration: line-through;
        }
        .new-price{
          color: var(--theme-color);
          span {
            font-size: 0.384rem;
          }
        }
        .new-price-t{
          color: var(--theme-color);
          font-size: .2688rem;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
        }
      }
      .has-combo{
        color: var(--theme-color);
        font-size: 0.3rem;
      }
    }
    
  }
  .course-list{
    background-color: #ffffff;
    margin-top: .2rem;
    margin-bottom: 1rem;
    padding-bottom: .6rem;
    .title{
      font-size: .2688rem;
      width: 6.624rem;
      margin: 0 auto;
      padding: .2rem 0 0;
    }
    .course-box{
      width: 6.624rem;
      margin: 0 auto;
      padding: .288rem 0;
      display: flex;
      justify-content: space-between;
      .box-left{
        width: 2.592rem;
        height: 1.728rem;
        border-radius: .04rem;
        img{
          width: 100%;
          height: 100%;
          display: block;
          border-radius: 0.04rem;
        }
      }
      .box-right{
        width: 3.8rem;
        height: 1.728rem;
        .course-name {
          font-size: .2688rem;
          font-weight: bold;
          line-height: .35rem;
          height: .35rem;
          color: #494a4d;
          display: -webkit-box;
          -webkit-line-clamp:1;
          overflow: hidden;
          text-overflow: ellipsis;
          -webkit-box-orient: vertical;
          margin: .06rem 0 .1rem;
        }
        .course-info {
          font-size: 0.2304rem;
          font-weight: bold;
          line-height: .3rem;
          height: .6rem;
          color: #949699;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          overflow: hidden;
          text-overflow: ellipsis;
          -webkit-box-orient: vertical;
        }
        .course-price{
          margin-top: .3rem;
          font-size: 0.2304rem;
          text-align: right;
          color: #adafb3;
          font-weight: bold;
          text-decoration: line-through;
        }
      }
    }
    .course-box.bottom{
      border-bottom: 1px solid #ededf1;
    }
  }
  .combo-detail-info{
    margin-top: .2rem;
    margin-bottom: 1rem;
    padding: .288rem;
    background-color: #fff;
    .detail-title{
      padding-left: .2rem;
      font-size: .384rem;
      font-weight: 700;
      color: #313233;
      position: relative;
      margin-bottom: .2rem;
      &::after{
        content: "";
        display: block;
        width: .03rem;
        height: .384rem;
        background-color: var(--theme-color);
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
      }
    }
    .detail-content{
    }
  }
  .footer{
    position: fixed;
    left: 0;
    bottom: 0;
    width: 7.2rem;
    height: 1rem;
    background-color: #ffffff;
    border-top: 1px solid #ededf1;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    .submit-btn{
      font-size: .3072rem;
      margin-right: .2rem;
      width: 2rem;
      height: .8rem;
      text-align: center;
      line-height: .8rem;
      color: #ffffff;
      background-color: var(--theme-color);
      border-radius: .1rem;
    }
  }
}
</style>
<style lang="scss">
.page-mobile-combo-detail {
  @import "~/assets/css/richtext.scss";
}
</style>
